import { Component } from '@angular/core';


import jspdf from "jspdf";
import html2canvas from "html2canvas";

@Component({
  selector: 'app-canvas-pdf',
  templateUrl: './canvas-pdf.component.html',
  styleUrls: ['./canvas-pdf.component.less']
})
export class CanvasPdfComponent {

  element: any;

  pdfTitle: string = '你想要的保存pdf文件的名字';


  ExportPDF() {
    this.element = document.getElementById("pdfbox");
    html2canvas(this.element, {
      logging: false, //一开始canvas设置不渲染页面
    }).then((canvas) => {
      let pdf: any = new jspdf("p", "mm", "a4"); //纵向，单位mm，A4纸张大小
      let ctx: any = canvas.getContext("2d"); //预设2维画布
      let a4w: number = 190; //设置显示内容的大小，A4大小：210*297；最后显示在A4内部区域大小为：190*360
      let a4h: number = 260;
      let imgHeight: number = Math.floor((a4h * canvas.width) / a4w); //按A4显示比例换算一页图像的像素高度
      let renderedHeight: number = 0;

      while (renderedHeight < canvas.height) {
        //判断页面有内容时
        let page: any = document.createElement("canvas"); //创建画布
        page.width = canvas.width; //设置画布宽高等于内容宽高
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //画布的高等于内容的最小的高度（不足一页）
        //用getImageData裁剪指定区域，并绘制到前面创建的canvas对象中
        let a: any = page.getContext("2d");
        a.putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
        pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width)); //添加图片到页面，保留10mm边距

        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage();
        }
      }
      // pdf.save(`${this.pdfTitle}.pdf`); // 导出PDF文件
      pdf.output('dataurlnewwindow'); // 在新窗口查看PDF文件

    });

    // ————————————————
    // 原文链接：https://blog.csdn.net/u014353113/article/details/115760845
  }
}

/**
 * 创建打印画布2.0
 * 
// 导出页面为PDF格式
import html2canvas from "html2canvas";
import JsPDF from "jspdf";

const htmlToPdf = {
  getPdf(title: string) {
    const targetDom = document.getElementById("pdfDom_children");

    html2canvas(document.querySelector("#pdfDom_children"), {
      allowTaint: true,
      backgroundColor: "white",
      useCORS: true, //支持图片跨域
      scale: 1, //设置放大的倍数
      // height: targetDom.clientHeight,  // 网上原来的设置，没用，注释掉了
      // width: targetDom.clientWidth,  // 网上原来的设置，没用，注释掉了
      // windowHeight: targetDom.clientHeight,  // 网上原来的设置，没用，注释掉了
    }).then((canvas) => {
      //内容的宽度
      const contentWidth = canvas.width;
      //内容的高度
      const contentHeight = canvas.height;
      //一页pdf显示htm1页面生成的canvas高度，a4纸的尺寸[595.28,841.89];
      const pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的htm1页面高度
      let leftHeight = contentHeight;
      //页面偏移
      let position = 0;
      //a4纸的尺寸[595.28,841.89],htm1页面生成的canvas在pdf中图片的宽高
      const imgwidth = 595.28;
      const imgHeight = (592.28 / contentWidth) * contentHeight;
      //canvas转图片数据
      const pageData = canvas.toDataURL("img/jpeg", 1.0);
      //新建JSPDF对象
      const PDF = new JsPDF("", "pt", "a4");
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, "JPEG", 0, 0, imgwidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, "JPEG", 0, position, imgwidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      console.log(pageData); //保存文件
      PDF.save(title + ".pdf");
    });
  },
};

export default htmlToPdf;

 */
